import react from 'react';
import { Row, Col } from 'antd';
import styles from './MyRow.less';

/**
 * row 属性
 * 1.
 * 1)gutter 每一个 col之间的间隔 默认水平
 * 不响应式:  gutter={66}
 * 响应式: gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} xs: < 576px sm: ≥ 576px md: ≥ 768px lg: ≥ 992px xl: ≥ 1200px xxl: ≥ 1600px 屏幕的大小
 * 2)垂直间距
 * gutter={[1, { xs: 8, sm: 16, md: 24, lg: 32 }]} 第二个
 * 3) align
 * 整体元素的对齐方式 top ｜middle ｜ bottom ｜stretch
 * 4）justify
 * 水平对齐方式 start ｜ end | ...
 * 5)wrap
 * 是否自动换行 true | false
 *
 *
 * col 属性
 * 1. span 每一行的span一共是24 ,如果 超过了加起来span超过24会换到下一行，这时候 垂直之间的间隔 gutter= {[]} 数组第二个元素设置，第一个是水平间隔
 * 2. order 排序
 * 3. offset
 * offset={1} 左移动一个span 不会重叠，会挤element
 * 4. pull
 * pull={1} 向左偏1个span 会重叠，像浮动一样
 * 5. push
 * push={1} 向右偏1个span
 * offset主要用于留出空间，而pull则更多地用于动态调整元素的位置
 *
 */
export default () => {
  const list = [
    {
      benefitTypeCode: 'HAE3S0',
      currency: 'JPY',
      benefitItemInfoList: [
        {
          benefitItemCode: 'HE03',
          limitInfoList: [
            {
              limitCode: 'reimbursement_multiple',
              limitValue: null,
              calculateFormula: '[Women Surgery Flag Multiplier]',
              shareItems: null,
              amount: null,
              limitLayer: '',
              groupList: null,
              unit: 'Times',
              limitValueType: 'C',
              showRemainingBalance: false,
              shareBenefitList: [],
              c360DisplayValueFlag: null,
              calculatorParamsList: null,
              calculatorCode: 'JP005',
              spcParamValue: null,
              limitName: 'reimbursement_multiple',
              id: '95295f9a-fd1c-46e2-abca-13c3e4e3c3ec',
              remainingBalance: null,
              scopeLevel: null,
              revampDate: '',
              limitId: '95295f9a-fd1c-46e2-abca-13c3e4e3c3ec',
            },
            {
              limitCode: 'items_per_surgery_per_lifetime',
              limitValue: null,
              calculateFormula: '[Total Payable Times]',
              shareItems: null,
              amount: null,
              limitLayer: '',
              groupList: null,
              unit: 'Items',
              limitValueType: 'C',
              showRemainingBalance: true,
              shareBenefitList: [],
              c360DisplayValueFlag: null,
              calculatorParamsList: null,
              calculatorCode: 'JP006',
              spcParamValue: null,
              limitName: 'items_per_surgery_per_lifetime',
              id: '40f73591-01ec-4bda-8647-040f74021156',
              remainingBalance: null,
              scopeLevel: null,
              revampDate: '',
              limitId: '40f73591-01ec-4bda-8647-040f74021156',
            },
          ],
          benefitItemName: 'HE03',
        },
        {
          benefitItemCode: 'HE02',
          limitInfoList: [
            {
              limitCode: 'reimbursement_multiple',
              limitValue: null,
              calculateFormula: '[Women Surgery Flag Multiplier]',
              shareItems: null,
              amount: null,
              limitLayer: '',
              groupList: null,
              unit: 'Times',
              limitValueType: 'C',
              showRemainingBalance: false,
              shareBenefitList: [],
              c360DisplayValueFlag: null,
              calculatorParamsList: null,
              calculatorCode: 'JP005',
              spcParamValue: null,
              limitName: 'reimbursement_multiple',
              id: 'a0b56c4a-9142-41f6-bd63-91e917ae4966',
              remainingBalance: null,
              scopeLevel: null,
              revampDate: '',
              limitId: 'a0b56c4a-9142-41f6-bd63-91e917ae4966',
            },
            {
              limitCode: 'items_per_surgery_per_lifetime',
              limitValue: null,
              calculateFormula: '[Total Payable Times]',
              shareItems: null,
              amount: null,
              limitLayer: '',
              groupList: null,
              unit: 'Items',
              limitValueType: 'C',
              showRemainingBalance: true,
              shareBenefitList: [],
              c360DisplayValueFlag: null,
              calculatorParamsList: null,
              calculatorCode: 'JP006',
              spcParamValue: null,
              limitName: 'items_per_surgery_per_lifetime',
              id: '9721db36-fc2f-4407-ab84-1c1c708eff85',
              remainingBalance: null,
              scopeLevel: null,
              revampDate: '',
              limitId: '9721db36-fc2f-4407-ab84-1c1c708eff85',
            },
          ],
          benefitItemName: 'HE02',
        },
      ],
      limitInfoList: [],
      benefitTypeName: 'HAE3S0',
    },
    {
      benefitTypeCode: 'HAE3L0',
      currency: 'JPY',
      benefitItemInfoList: [
        {
          benefitItemCode: 'HE04',
          limitInfoList: [
            {
              limitCode: 'reimbursement_multiple',
              limitValue: 5,
              calculateFormula: null,
              shareItems: null,
              amount: null,
              limitLayer: '',
              groupList: null,
              unit: 'Times',
              limitValueType: 'F',
              showRemainingBalance: false,
              shareBenefitList: [],
              c360DisplayValueFlag: null,
              calculatorParamsList: null,
              calculatorCode: null,
              spcParamValue: null,
              limitName: 'reimbursement_multiple',
              id: '48d3ec58-eb0d-4ab6-8e59-bbf3f7ba4570',
              remainingBalance: null,
              scopeLevel: null,
              revampDate: '',
              limitId: '48d3ec58-eb0d-4ab6-8e59-bbf3f7ba4570',
            },
            {
              limitCode: 'incidents_per_lifetime_limit',
              limitValue: 1,
              calculateFormula: null,
              shareItems: null,
              amount: null,
              limitLayer: '',
              groupList: null,
              unit: 'Incidents',
              limitValueType: 'F',
              showRemainingBalance: true,
              shareBenefitList: [],
              c360DisplayValueFlag: null,
              calculatorParamsList: null,
              calculatorCode: null,
              spcParamValue: null,
              limitName: 'incidents_per_lifetime_limit',
              id: '62348751-eb6e-407f-8ac3-1ce0c9219717',
              remainingBalance: null,
              scopeLevel: null,
              revampDate: '',
              limitId: '62348751-eb6e-407f-8ac3-1ce0c9219717',
            },
          ],
          benefitItemName: 'HE04',
        },
      ],
      limitInfoList: [],
      benefitTypeName: 'HAE3L0',
    },
    {
      benefitTypeCode: 'HAE3P0',
      currency: 'JPY',
      benefitItemInfoList: [
        {
          benefitItemCode: 'HE01',
          limitInfoList: [
            {
              limitCode: 'days_per_confinement_limit',
              limitValue: null,
              calculateFormula: '[Total Payable Days]',
              shareItems: null,
              amount: null,
              limitLayer: '',
              groupList: null,
              unit: 'Days',
              limitValueType: 'C',
              showRemainingBalance: true,
              shareBenefitList: [],
              c360DisplayValueFlag: null,
              calculatorParamsList: null,
              calculatorCode: 'JP007',
              spcParamValue: null,
              limitName: 'days_per_confinement_limit',
              id: '9a35ad53-c87a-44fe-8069-44c4e191ed7e',
              remainingBalance: null,
              scopeLevel: null,
              revampDate: '',
              limitId: '9a35ad53-c87a-44fe-8069-44c4e191ed7e',
            },
            {
              limitCode: 'days_per_lifetime_limit',
              limitValue: 1095,
              calculateFormula: null,
              shareItems: null,
              amount: null,
              limitLayer: '',
              groupList: null,
              unit: 'Days',
              limitValueType: 'F',
              showRemainingBalance: true,
              shareBenefitList: [],
              c360DisplayValueFlag: null,
              calculatorParamsList: null,
              calculatorCode: null,
              spcParamValue: null,
              limitName: 'days_per_lifetime_limit',
              id: 'f3db28ae-c51e-4032-8bdd-411c46a335c6',
              remainingBalance: null,
              scopeLevel: null,
              revampDate: '',
              limitId: 'f3db28ae-c51e-4032-8bdd-411c46a335c6',
            },
          ],
          benefitItemName: 'HE01',
        },
      ],
      limitInfoList: [],
      benefitTypeName: 'HAE3P0',
    },
  ];
  return (
    <>
      <Row
        style={{ backgroundColor: '', height: '210px' }}
        justify="end"
        align="bottom"
        gutter={[1, 5]}
      >
        <Col span={12} order={1}>
          <div className={styles.bor}>1</div>
        </Col>
        <Col span={12} order={2}>
          <div className={styles.bor}>2</div>
        </Col>
        <Col span={4} order={3}>
          <div className={styles.bor}>3</div>
        </Col>
        <Col span={4} order={4}>
          <div className={styles.bor}>4</div>
        </Col>
      </Row>
      <Row
        justify="start"
        style={{ backgroundColor: 'seashell', height: '210px' }}
        gutter={5}
      >
        <Col span={2} order={4} push={0} offset={0}>
          <div className={styles.bor}>1</div>
        </Col>
        <Col span={2} order={3} push={1} offset={0}>
          <div className={styles.bor}>2</div>
        </Col>
        <Col span={6} order={2}>
          <div className={styles.bor}>3</div>
        </Col>
        <Col span={6} order={1}>
          <div className={styles.bor}>4</div>
        </Col>
      </Row>
    </>
  );
};
